import Taro, { Component } from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
import './index.scss'
import { OSS } from '@/config/config'
import classNames from 'classnames'

interface IProps {
  amount: any // 支付金额
  isOpened: boolean //  显示隐藏
  onClose: any // 取消事件
  onCancel: any // 取消支付
  onConfirm: any // 确认支付
}

export default class WalletPay extends Component<IProps, {}> {
  state: any
  props: any
  static options = {
    addGlobalClass: true
  }

  //  点击事件
  onClick(name) {
    if (this.props[name]) {
      this.props[name]()
    }
  }

  render() {
    const { amount, isOpened } = this.props
    // @ts-ignore
    return (<View className='wallet-pay' catchtouchmove>
      <View className={classNames('fy-transition fade fy-mask', isOpened && 'show')} onClick={this.onClick.bind(this, 'onClose')}/>
      {<View className={classNames('fy-transition slide-bottom fy-popup fy-popup--bottom wallet-pay__content', isOpened && 'show')}>
        <View className='d-f f-d-c a-i-c'>
          <Image src={`${OSS}/system/image/icon_wallet_pay.png`} className='wallet-bg'/>
          <View className='pay-amount m-t-30'>您正在使用余额支付<Text className='pay-amount__num bnn-number'>{amount}</Text>元</View>
        </View>
        <View className='pay-btns d-f j-c-b'>
          <View className='pay-btn cancel-btn f-g-5 thin-border' hoverClass='hover-class--btn' onClick={this.onClick.bind(this, 'onCancel')}>取消支付</View>
          <View className='pay-btn confirm-btn f-g-5' hoverClass='hover-class--btn' onClick={this.onClick.bind(this, 'onConfirm')}>确认支付</View>
        </View>
      </View>}
    </View>)
  }
}
